<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>Scal oncalchange Functional Test</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <script src="javascripts/prototype.js" type="text/javascript"></script>
    <script src="javascripts/effects.js" type="text/javascript"></script>
    <script src="javascripts/scal.js" type="text/javascript"></script>
    <link rel="stylesheet" href="styles/scaltables.css" type="text/css" media="screen"/>
	<style type="text/css">
		html,html body {height:100%; margin: 0 auto; text-align: center;}
		#container {
			width: 600px;
			margin: 0 auto;
			padding: 0px;
			height: 100%;
		}
		fieldset {
			width: 230px;
			float: left;
			margin: 0px;
			padding: 0px;
			text-align: center;
		}
		#fromcal, #tocal {
			width: 150px;
			margin: 0 auto;
			padding: 0px;
			height: 100%;
			text-align: center;
        }
    </style> 
  </head>
  <body>
      <div id="container">
				<form name="scalform" id="scalform" method="post" action="#">
					<fieldset>
						<legend>From:</legend>
            <select name="frommonth" id="frommonth">

            </select>
            <select name="fromdays" id="fromdays">

            </select>
            <select name="fromyears" id="fromyears">

						</select>
					<div class="scal tinyscal slick" id="fromcal">&nbsp;</div>
				</fieldset>
					<fieldset>
						<legend>To:</legend>
            <select name="tomonth" id="tomonth">

            </select>
            <select name="todays" id="todays">

            </select>
            <select name="toyears" id="toyears">

						</select>
					<div class="scal tinyscal slick" id="tocal">&nbsp;</div>
					</fieldset>
		</form>
	</div>
    <script type="text/javascript" language="javascript">
        // <![CDATA[    
        var updateFromSelect = function(d){
						var dt = (d instanceof Date) ? d : d.date;
						buildSelect('from', {
							month: dt.format('mmmm'),
							days: dt.format('dd'),
							years: dt.getFullYear()
						});
        };
        var updateToSelect = function(d){
						var dt = (d instanceof Date) ? d : d.date;
						buildSelect('to', {
							month: dt.format('mmmm'),
							days: dt.format('dd'),
							years: dt.getFullYear()
						});
				};
				var options = Object.extend({
            oncalchange: updateFromSelect,
            titleformat:'mmmm yyyy',
            closebutton:'<img src="styles/images/close.gif" />',
            dayheadlength:2,
            prevbutton: '<img src="styles/images/prev.gif" />',
            nextbutton: '<img src="styles/images/next.gif" />',
            yearnext: '<img src="styles/images/nexty.gif" />',
            yearprev: '<img src="styles/images/prevy.gif" />',
            weekdaystart:0,
            tabular: true,
						planner: false
            });	
				var calFrom = new scal('fromcal', updateFromSelect, options);
				options.year = calFrom.currentdate.getFullYear() + 1;
				options.oncalchange = updateToSelect;
				var calTo = new scal('tocal', updateToSelect, options);
				var optionFormat = '<option value="#{value}">#{value}</option>';
				
				updateToSelect(calTo.currentdate);
				updateFromSelect(calFrom.currentdate);
				$('scalform').select('select').each(function(s){
					var direction = s.getAttribute('id').include('from') ? 'from' : 'to';
					s.observe('change', function(e){
						if(!Element.visible(direction + 'cal')) {
							Effect.Appear(direction + 'cal');
						}
						var params = ['month','days','years'].collect(function(d){ return $F(direction + d); });		
						var d = new Date(params[0] + ' ' + params[1] + ', ' + params[2]);
						if(direction == 'to') {
            	calTo.setCurrentDate(d);
						} else if(direction == 'from') {
							calFrom.setCurrentDate(d);
						}								
					});
				});
				
				function buildSelect(direction, params) {
					var selectParams = $H(params);
					var currentYear = selectParams.get('years');
					var fom = direction == 'to' ? calTo.firstofmonth : calFrom.firstofmonth;
					var eom = direction == 'to' ? calTo.lastofmonth : calFrom.lastofmonth;
					var selects = {
						month: Date.prototype.monthnames,
						years: $A($R(currentYear - 10, currentYear + 10)),
						days: $A($R(fom, eom))
					};
					selectParams.each(function(pair) {
						var select = $(direction + pair.key);
						select.descendants().invoke('remove');
						var selected = 0;
						selects[pair.key].each(function(d,i){
							if(pair.key == 'days') { d = d.format('dd'); }
							select.insert(optionFormat.interpolate({value: d}));
							if(d == pair.value) {
								select.selectedIndex = i;
								selected = i;
							}	
						});
						select.options[selected].selected = true;
					});
				}
        // ]]>
    </script>
  </body>
</html>


